@charset "utf-8";
*{
    margin:0;
    padding:0;
}
ul li{
     list-style:none;
}
input{
    display:none;
}
div{
    width:150px;
    background:#f2f2f2;
    label{
        height:40px;
        line-height: 40px;
        .plus{
            display:inline;
        }
        .reduce{
            display:none;
        }
    }
    ul{
        //阶段1，直接嗯隐藏
        //display:none;

        //阶段2transition
        max-height:0;
        overflow: hidden;
        background:skyblue;
        transition:all 1s linear 0s;
    }
}

input:checked ~ul{
    // display:block;
    // height:100px;
    // % 参照物相对父亲
    // auto参照物时相对自身内容撑开（默认）
    // height:auto;
    max-height:250px;
    //当收起来时会有延迟时间，因为本来ul高度小于max-height:250px;
    // 收缩是从250px开始，到ul本身高度时，中间有一段距离，延迟就是这段距离花的时间。
}
input:checked +label{
    .plus{
        display:none;
    }
    .reduce{
        display:inline;
    }
}
// 做到完美高度收缩。可以给每个ul一个固定的高度，要写多个。